<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="/WEB-INF/tld/fns.tld" prefix="fns" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/head.jsp" />
</head>
<body>

<form class="layui-form layui-form-pane" id="_form">
    <input type="hidden" name="personalId" value="${personalId}">
    <div class="layui-form-item">
        <label class="layui-form-label">合同编号</label>
        <div class="layui-input-block">
            <input name="contractNumber" autocomplete="off" placeholder="请输入合同编号" class="layui-input"
                   lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">合同类型</label>
        <div class="layui-input-block">
            <select name="contractType">
                <c:forEach items="${fns:getDictList('contract_type')}" var="type">
                    <option value="${type.value}">${type.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">合同期限(年)</label>
        <div class="layui-input-block">
            <input name="period" autocomplete="off" placeholder="请输入合同期限" id="period"
                   class="layui-input" lay-verify="number" oninput="changeDate()">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生效日期</label>
        <div class="layui-input-block">
            <input name="effectiveTime" autocomplete="off" placeholder="请输入生效日期" id="effectiveTime"
                   class="layui-input date-select" readonly="readonly" lay-verify="date" onchange="changeDate()">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">结束日期</label>
        <div class="layui-input-block">
            <input name="uneffectiveTime" class="layui-input" readonly="readonly" id="uneffectiveTime">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="remarks" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="float: right">
            <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
        </div>
    </div>
</form>
<jsp:include page="/resources/inc/pageFooter.jsp" />
<script>
    $(function () {
        FormCommon.initForm({
            url: '${basePath}/oa/hr/personalContract/create',
            subContentType: "json"
        });
        layui.use('laydate', function () {
            laydate = layui.laydate;
            laydate.render({
                elem: ".date-select" //指定元素
                , theme: '#393D49'
                , done: function (value, date, endDate) {
                    changeDate();
                }
            });
        });
    });
    function changeDate() {
        var effectiveTimeVal = $("#effectiveTime").val();
        var periodVal = $("#period").val();
        var period = Number($("#period").val());
        var flag = false;
        if (period.toString().length > 2) {
            flag = true;
        }
        if (!Number.isInteger(period)) {
            flag = true;
        }
        if (period < 1 && periodVal.length != 0) {
            flag = true;
        }
        if (flag) {
            layer.msg("请输入正确的合同期限(两位以内的正整数)", {icon: 5});
            $("#uneffectiveTime").val("");
            return;
        }
        if (effectiveTimeVal.length < 1 || periodVal.length < 1) {
            $("#uneffectiveTime").val("");
            return;
        }
        var effectiveTime = new Date(effectiveTimeVal);
        var uneffectiveTime = effectiveTime;
        uneffectiveTime.setYear(uneffectiveTime.getFullYear() + period);
        var fullYear = uneffectiveTime.getFullYear();
        var month = uneffectiveTime.getMonth() + 1;
        var day = uneffectiveTime.getDate();
        if (month.toString().length < 2) {
            month = 0 + month.toString();
        }
        if (day.toString().length < 2) {
            day = 0 + day.toString();
        }
        var date = fullYear + "-" + month + "-" + day;
        $("#uneffectiveTime").val(date);
    }
</script>
</body>
</html>
